<template>
  <div class="choose-address">
    <div class="operation-btn-wrapper">
      <a-button type="primary" @click="addHandle">新增地址</a-button>
    </div>
    <div class="table-content">
      <vxe-table
        ref="tableRef"
        @radio-change="radioChangeEvent"
        :radio-config="{ highlight: true, trigger: 'row' }"
        :data="tableData"
        :loading="loading"
        border
        show-overflow="title"
        height="100%"
        :scroll-y="{ enabled: true, gt: 50 }"
        :row-config="{ height: 100 }"
        :show-header="false"
      >
        <vxe-column field="信息">
          <template #default="{ row }">
            <div class="address-size">
              <div class="addres-phone">
                <span>联系人1:{{ row.contact1 }}</span>
                <span>联系人2:{{ row.contact2 }}</span>
              </div>

              <div class="addres-phone">
                <span>联系电话1:{{ row.phone1 }}</span>
                <span>联系电话2:{{ row.phone2 }}</span>
              </div>

              <div class="address-info">
                <span>取件地址:{{ row.state }}{{ row.city }}{{ row.zone }}{{ row.street }} {{ row.address }}</span>
              </div>
            </div>
          </template>
        </vxe-column>
        <vxe-column type="radio" width="60">
          <template #header>
            <a-button type="link" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</a-button>
          </template>
        </vxe-column>
        <!-- <vxe-column field="contact1" title="联系人1"></vxe-column>
        <vxe-column field="phone1" title="联系电话1"></vxe-column>
        <vxe-column field="address" title="地址"></vxe-column>
        <vxe-column field="contact2" title="联系人2"></vxe-column>
        <vxe-column field="phone2" title="联系电话2"></vxe-column> -->
      </vxe-table>
    </div>
    <div class="submit-btn-wrapper">
      <a-button type="primary" @click="submitHandle">确认</a-button>
      <a-button @click="cancelHandle">取消</a-button>
    </div>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import AddPickupAddress from "@/views/client/configCenter/addressManagement/components/addPickupAddress/index.vue";
export default {
  components: {
    AddPickupAddress
  }
};
</script>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import ModalHook from "@/hook/modalHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit", state: any): void;
}>();
const { visible, passData } = toRefs(props);
const { tableData, dialogOpts, loading, tableRef, selectRow } = InitHook();
const { addHandle, init, submitHandle, cancelHandle, clearRadioRowEevnt, radioChangeEvent } = OperationHook({ dialogOpts, tableData, loading, emit, tableRef, selectRow, passData });
const { dialogSubmitHandle } = ModalHook({
  dialogOpts,
  callBack: () => init()
});
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      selectRow.value = null;
    }
  }
);
</script>
<style lang="stylus" scoped>
.choose-address{
    .operation-btn-wrapper{
      display:flex;
      justify-content:flex-end;
      padding-bottom: 12px;
    }
    .table-content{
        height: calc(100vh - 180px);
    }
    .submit-btn-wrapper{
        padding: 12px;
        text-align: center;
        :deep(.ant-btn){
            margin-right: 16px;
        }
    }
    .address-size{
      display:flex;
      flex-direction:column;
      padding:5px

      div:first-child{
        margin-bottom:5px
      }
      .address-info{
        display:flex;
        justify-content:space-between;
        align-items:center;
        font-size:14px
        white-space: break-spaces;
      }
      .addres-phone{
        display:flex;
        justify-content:flex-start;
        font-size:14px
        >span:first-child{
          width:60%
        }
      }
    }
}
</style>
